<template>
  <div class="overall">
    <div class="annulus-box">
      <div class="plan flexColumn" v-if='orgCode!="集团"'>
        <span class="flexCenter fontColor999"> 超越 </span>
        <span class="flexCenter">
          <span class="fontColor333 planNum fontWeight700 numFontFamily ">{{plan}}</span>
          <span>%</span>
        </span>
        <span class="flexCenter fontColor999">的{{name}}</span>
      </div>
      <div v-else class="plan flexColumn">
        <span class="flexCenter fontColor999">本月时效 </span>
        <span class="flexCenter">
          <span class="flexCenter fontColor999" v-if='plan>=0'>提升了</span>
          <span class="flexCenter fontColor999" v-else>下降了</span>
        </span>
        <span><span  class="fontColor333 planNum fontWeight700 numFontFamily ">{{plan | getAbsoluteValue}}</span>%</span>
      </div>
      <div class="annulus-bck">
        <div class="annulus-left">
          <!-- :style="`transform: rotate(${plan>50?(plan-50)*3.6:0}deg);`" -->
          <div ref="semicircle-l" class="semicircle" :class="plan==0?'bGe':''"></div>
        </div>
        <div class="annulus-right">
          <!-- :style="`transform: rotate(${plan<50?plan*3.6:180}deg);`" -->
          <div ref="semicircle-r" class="semicircle" :class="plan==0?'bGe':''"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Number,
        default: 0
      },
      roleType:{
        default: 0
      },
      detailType:{
        default: ''
      },
      orgCode:{
        
      }
    },
    data() {
      return {
        plan: this.value,
        name:'同事'
      };
    },
    created() {
      this.plan = this.value
    },
    mounted() {
      this.plan = this.value
      this.planChange();
    },
    watch: {
      value(newVal, oldVal) {
        this.plan = newVal
        if (oldVal > 0) {
          if (oldVal > 50) {
            this.$refs["semicircle-r"].style.transform = `rotate(-180)`;
            this.$refs["semicircle-l"].style.transform = `rotate(0)`;
          } else {
            this.$refs["semicircle-r"].style.transform = `rotate(0)`;
            this.$refs["semicircle-l"].style.transform = `rotate(0)`;
          }
        }
        this.planChange()
      },
      orgCode(newVal,oldVal){
        if (this.roleType == 0) {
          this.name = '同事'
        } else if (this.roleType == 1 && this.detailType == 1) {
          this.name = '同事'
        } else if (this.roleType == 1 && this.detailType == 2) {
          this.name = '部门'
        } else if (this.roleType == 2 && this.detailType == 1) {
          this.name = '同事'
        } else if (this.roleType == 2 && this.detailType == 2) {
          this.name = '地区'
        } else if(this.roleType == 3 && this.detailType == 1){
          this.name = '同事'
        } else if (this.roleType == 3) {
          this.name = '同事'
        }
      }
    },
    methods: {
      planChange() {
        setTimeout(() => {
          if (this.plan > 50 && this.plan <= 100) {
            this.$refs["semicircle-l"].style.transform = `rotate(${(this.plan -
              50) *
              3.6}deg)`;
              this.$refs["semicircle-r"].style.transform = `rotate(${(this.plan -
              50) *
              3.6}deg)`;
              this.$refs["semicircle-l"].style.webkit_transform = `rotate(${(this.plan -
              50) *
              3.6}deg)`;
              this.$refs["semicircle-r"].style.webkit_transform = `rotate(${(this.plan -
              50) *
              3.6}deg)`;
          }
          if (this.plan > 100) {
            this.$refs["semicircle-l"].style.transform = `rotate(180deg)`;
          }
          if (this.plan < 50) {
            this.$refs["semicircle-r"].style.transform = `rotate(${this.plan *
              3.6}deg)`;
          } else {
            this.$refs["semicircle-r"].style.transform = `rotate(180deg)`;
          }
        }, 500);
      }
    },
    filters:{
      getAbsoluteValue(data){
        return data?Math.abs(data):'0'
      }
    }
  };
</script>

<style scoped lang="scss">
  .overall {
    margin: 0 0.4rem;
  }

  .bGe{
    background-color: #DEDEDE;
  }

  .annulus-box {
    width: 2.2rem;
    height: 2.2rem;
    /* box-shadow: 0 0 4px #7EC6FF; */
    position: relative;
    border-radius: 50%;
    .planNum {
      font-size: 0.4rem;
    }
    /* -webkit-mask: radial-gradient(transparent 50px, white 0px); */
  }

  .annulus-bck {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #7EC6FF;
    /* background:radial-gradient(rgb(0, 255, 213) 50%,rgb(0, 110, 255) 100%); */
    position: absolute;
    left: 0;
    top: 0;
    /* box-shadow: 0 0 10px #58A6F4; */
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }



  .plan {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: calc(50% - 0.8rem);
    top: calc(50% - 0.8rem);
    z-index: 3;
    /* box-shadow: 0 0 px #9fedec; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 0.24rem;
    color: #999;
    span:last-child{
      margin-top: 0.1rem;
    }
  }

  .annulus-left,
  .annulus-right {
    transform: scale(1.02);
    transform-origin: 50% 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: inline;
  }

  .semicircle {
    transition: linear 0.8s;
    width: 2.2rem;
    height: 100%;
    box-sizing: border-box !important;
    border-radius: 50%;
  }

  .annulus-left .semicircle {
    transition-delay: 0.8s;
    left: 0;
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
    background: #DEDEDE
  }

  .annulus-right .semicircle {
    position: relative;
    left: -100%;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
    background: #DEDEDE
  }
</style>